<template>
    <div class="container1">

        <Card class="container2">
        <div class="newyear">
            <h1 class="newyear-title">豪斯口琴电台</h1>
            <p class="newyear-subtitle">纯演奏区UP主【豪斯·比格朗费斯】最新杂谈节目强势入驻哔谱哔谱，火爆连载中！粉丝过千，播放过万不是梦！</p>
            <div class="gridlist-container">
                <a href="https://www.bilibili.com/video/av21706043/" target="_blank">
                    <Card class="gridlist" >
                       <img src="https://upload-images.jianshu.io/upload_images/2141706-3202711e264f169d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">第2期</span>
                       <span slot="extra"> <b>教练你为啥要学口琴？聊聊自己的口琴入门历程 ~</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av20564831/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-1fb3a1db22876494.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">第1期</span>
                       <span slot="extra"> <b>教练，吹口琴的人都是基佬吗？聊一聊口琴玩家的那些梗~</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av20417696/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-9f0f1e28de681487.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">第0期</span>
                       <span slot="extra"> <b>教练我要学口琴！教练：坐下听我讲故事</b></span>
                    </Card>
                </a>

            </div>

        </div>
        </Card>



        <Card class="container2">
        <div class="newyear">
            <h1 class="newyear-title">JE吧专区</h1>
            <p class="newyear-subtitle">Justice_Eternal吧一年一次，一次鸽一年的面基活动！</p>
            <div class="gridlist-container">
                <a href="https://www.bilibili.com/video/av22119348/" target="_blank">
                    <Card class="gridlist" >
                       <img src="https://upload-images.jianshu.io/upload_images/2141706-8216d6d4a7be6b15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">JE吧西安合奏</span>
                       <span slot="extra"> <b>君色に染まる(染上你的颜色MV)</b></span>
                    </Card>
                </a>
                <a href="https://tieba.baidu.com/p/5649612875" target="_blank">
                    <Card class="gridlist" >
                       <img src="https://upload-images.jianshu.io/upload_images/2141706-6cadbdf4a3745adc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">JE吧青岛合奏</span>
                       <span slot="extra"> <b>火热报名中！！！</b></span>
                    </Card>
                </a>

            </div>

        </div>
        </Card>



        <Card class="container2">
        <div class="newyear">
            <h1 class="newyear-title">ACG口琴小苑专区</h1>
            <p class="newyear-subtitle">在这里，你可以聊医学、人生、爱情、ACG……甚至还有【口琴】！欢迎您的加入 QQ：374437595</p>
            <div class="gridlist-container">
                <a href="https://www.bilibili.com/video/av17636724/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-15d75a694584a328.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">2017年圣诞祭</span>
                       <span slot="extra"> <b>年度巨制！B站史上最大口琴演奏策划</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av13002958/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-369936a3fb51e476.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">2017年夏日祭</span>
                       <span slot="extra"> <b>以琴为契，于茫茫人海中遇见你</b></span>
                    </Card>
                </a>

            </div>

        </div>
        </Card>



        <Card class="container2">
	   	<div class="newyear">
	   		<h1 class="newyear-title">排骨の不科学の口琴教室</h1>
            <p class="newyear-subtitle">排骨的口琴小站，欢迎一起学习交流</p>
	        <div class="gridlist-container">
                <a href="https://www.bilibili.com/video/av15886047/" target="_blank">
    	            <Card class="gridlist" >
        	           <img src="http://upload-images.jianshu.io/upload_images/2141706-864e45115c886b37.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
        	           <span slot="title" class="gridlist-title">EP1（花舌）</span>
        	           <span slot="extra">by <b>吃猪的排骨</b></span>
    	            </Card>
                </a>
                <a href="https://www.bilibili.com/video/av15886250/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-864e45115c886b37.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP2（推键，移琴）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av15886606/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-864e45115c886b37.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP3（断奏）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av15886613/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-693930646f308805.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP4（震音，颤音）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av15886673/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-de120b8f12fdec7e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP4 part2（震音，颤音）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av15887697/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-abfad72355b9cd53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP5（快速演奏技巧入门）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av15887671/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-b9b5c98e412b388c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP6（八度和音）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>
                <a href="https://www.bilibili.com/video/av17665719/" target="_blank">
                    <Card class="gridlist" >
                       <img src="http://upload-images.jianshu.io/upload_images/2141706-044d090be6326c79.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="tutorial-img" />
                       <span slot="title" class="gridlist-title">EP7（模仿拨弦乐器 舌震音）</span>
                       <span slot="extra">by <b>吃猪的排骨</b></span>
                    </Card>
                </a>

<!--                 <Card class="gridlist" v-for="item in recommondList1" key="item.aid">
                  <img :src="item.pic" @click="playDetail1(item.id)" class="tutorial-img" />
                  <span slot="title" class="gridlist-title" @click="playDetail1(item.id)">{{item.title}}</span>
                  <span slot="extra">by <b>{{item.author}}</b></span>
                </Card> -->
	        </div>
		</div>
        </Card>
        <Card class="container2">
        <div class="newyear">
            <h1 class="newyear-title">音乐专区</h1>
            <div id="player5" class="aplayer" ref="ap5"></div>
            <div class="author"><a href="http://http://5sing.kugou.com/34713615/default.html">♡ 流萤川小时 ♡</a></div>
            <div id="player1" class="aplayer" ref="ap1"></div>
            <div class="author"><a href="http://5sing.kugou.com/3811857/fc/5.html">♡ 自由姐 ♡</a></div>    
            <div id="player2" class="aplayer" ref="ap2"></div>
            <div class="author"><a href="http://5sing.kugou.com/nyarin/lastupdate.html">♡ 猫燐kirin03 ♡</a></div>
            <div id="player3" class="aplayer" ref="ap3"></div>
            <div class="author"><a href="http://5sing.kugou.com/10590245/default.html###">♡ 月光银百合 ♡</a></div>
            <div id="player4" class="aplayer" ref="ap4"></div>
            <div class="author"><a href="http://music.163.com/#/artist?id=1077060">♡ 翎渡 ♡</a></div>
        </div>
        </Card>
<!-- 	   	<div class="newyear">
	   		<h1 class="newyear-title">A苑の圣诞祭&夏日祭</h1>
		</div> -->

    </div>
</template>

<script>
import APlayer from 'aplayer'
export default {
    data () {
      return {
				"recommondList1": [
				            {
				            
				                "id": 1000001,
				                "typename": "排骨大大",
				                "title": "八度和音入门与浅谈",
				                "author": "sqrsqr32",
				                "description": "",
				                "pic": "http://upload-images.jianshu.io/upload_images/2141706-864e45115c886b37.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
				                "src": "http://otr48sjv5.bkt.clouddn.com/%E5%85%AB%E5%BA%A6%E5%92%8C%E9%9F%B3%E5%85%A5%E9%97%A8%E4%B8%8E%E6%B5%85%E8%B0%88.mp4"
				            },
				            {
				            
				                "id": 1000002,
				                "typename": "排骨大大",
				                "title": "颤音，震音",
				                "author": "sqrsqr32",
				                "description": "",
				                "pic": "http://upload-images.jianshu.io/upload_images/2141706-b829195f5ccbf574.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
				                "src": "http://otr48sjv5.bkt.clouddn.com/%E9%A2%A4%E9%9F%B3%EF%BC%8C%E9%9C%87%E9%9F%B3.mp4"
				            },
				            {
				            
				                "id": 1000003,
				                "typename": "排骨大大",
				                "title": "断奏",
				                "author": "sqrsqr32",
				                "description": "",
				                "pic": "http://upload-images.jianshu.io/upload_images/2141706-693930646f308805.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
				                "src": "http://otr48sjv5.bkt.clouddn.com/%E6%96%AD%E5%A5%8F.mp4"
				            },
				            {
				            
				                "id": 1000004,
				                "typename": "排骨大大",
				                "title": "花舌",
				                "author": "sqrsqr32",
				                "description": "",
				                "pic": "http://upload-images.jianshu.io/upload_images/2141706-de120b8f12fdec7e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
				                "src": "http://otr48sjv5.bkt.clouddn.com/%E8%8A%B1%E8%88%8C.mp4"
				            },
				            {
				            
				                "id": 1000005,
				                "typename": "排骨大大",
				                "title": "快速演奏入门和概述",
				                "author": "sqrsqr32",
				                "description": "",
				                "pic": "http://upload-images.jianshu.io/upload_images/2141706-abfad72355b9cd53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
				                "src": "http://otr48sjv5.bkt.clouddn.com/%E5%BF%AB%E9%80%9F%E6%BC%94%E5%A5%8F%E5%85%A5%E9%97%A8%E5%92%8C%E6%A6%82%E8%BF%B0.mp4"
				            },
				            {
				            
				                "id": 1000006,
				                "typename": "排骨大大",
				                "title": "移琴，推键",
				                "author": "sqrsqr32",
				                "description": "",
				                "pic": "http://upload-images.jianshu.io/upload_images/2141706-b9b5c98e412b388c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
				                "src": "http://otr48sjv5.bkt.clouddn.com/%E7%A7%BB%E7%90%B4%EF%BC%8C%E6%8E%A8%E9%94%AE.mp4"
				            }
				            
				    ]
      }
    },
    components: {
    },
    mounted () {
            var ap1 = new APlayer({
        element: player1,
        narrow: false,
        autoplay: false,
        showlrc: false,
        mutex: true,
        theme: '#2d8cf0',
        mode: 'random',
        music: [
            {
                title: '数码宝贝 Brave heart',
                author: 'FREEDOM54',
                url: 'http://link1.5sing.kugou.com/35037559/ApQEAFX0UvqIJm1oAA_ePaYfYPUAABmVgKCjqAAD95V687.mp3',
                pic: 'http://wsing.bssdl.kugou.com/8f9355c1bfe1ad2e627b8114b77169af.png_180x180.png'
            },
            {
                title: '星之所在',
                author: 'FREEDOM54',
                url: 'http://link1.5sing.kugou.com/35037559/Yg0DAFXt30eAGeqCABHLdZiBmeU375.mp3',
                pic: 'http://wsing.bssdl.kugou.com/8f9355c1bfe1ad2e627b8114b77169af.png_180x180.png'
            },
            {
                title: '花名未闻 ED secret base 君がくれたもの',
                author: 'FREEDOM54',
                url: 'http://link1.5sing.kugou.com/35037559/_5MEAFX3bKSAQU2SABYZmeNGqtM935.mp3',
                pic: 'http://wsing.bssdl.kugou.com/8f9355c1bfe1ad2e627b8114b77169af.png_180x180.png'
            },
            {
                title: '火影忍者 萤之光',
                author: 'FREEDOM54',
                url: 'http://link1.5sing.kugou.com/35037559/BJQEAFXz1uSIGw0nAA9MSuYCzZ8AAAKKwNk2h8AD0xi465.mp3',
                pic: 'http://wsing.bssdl.kugou.com/8f9355c1bfe1ad2e627b8114b77169af.png_180x180.png'
            }
        ]
      });
      var ap2 = new APlayer({
        element: player2,
        narrow: false,
        autoplay: false,
        showlrc: false,
        mutex: true,
        theme: '#2d8cf0',
        mode: 'random',
        music: [
            {
                title: 'ハイドアンド シーク Hide And Seek ',
                author: '猫燐kirin03',
                url: 'http://link1.5sing.kugou.com/35037559/ApQEAFXsZJeAYIcnABCpWsBgz5c804.mp3',
                pic: 'http://wsing.bssdl.kugou.com/16171fa7eb52fb3036b0a6d876ae58dc.jpg_188x188.jpg'
            },
            {
                title: '告白予行練習',
                author: '猫燐kirin03',
                url: 'http://link1.5sing.kugou.com/35037559/eg0DAFbE4JaIVkdeAAoLb8D6eDsAAAIJwJIIYAACguH110.mp3',
                pic: 'http://wsing.bssdl.kugou.com/16171fa7eb52fb3036b0a6d876ae58dc.jpg_188x188.jpg'
            },
            {
                title: '血界战线ED Sugar Song to Bitter Step',
                author: '猫燐kirin03',
                url: 'http://link1.5sing.kugou.com/35037559/v4YBAFXn1q6IWHe0AAbzxADcV34AAA4fAGdr-EABvPc412.mp3',
                pic: 'http://wsing.bssdl.kugou.com/16171fa7eb52fb3036b0a6d876ae58dc.jpg_188x188.jpg'
            }
        ]
      });
      var ap3 = new APlayer({
        element: player3,
        narrow: false,
        autoplay: false,
        showlrc: false,
        mutex: true,
        theme: '#2d8cf0',
        mode: 'random',
        music: [
            {
                title: '六兆年と一夜物語',
                author: '月光银百合',
                url: 'http://link1.5sing.kugou.com/35037559/A5QEAFXmAtWIMhVAAA2nzIC0htgAAAy3AGUtvMADafk974.mp3',
                pic: 'http://wsing.bssdl.kugou.com/c66f82bdb5b49e9b88dcfe898407da93.jpg_188x188.jpg'
            },
            {
                title: '口袋妖怪 XY 天台 BGM',
                author: '月光银百合',
                url: 'http://link1.5sing.kugou.com/35037559/w4YBAFXngBWIThk7AAuvAcbmqGQAAA4yQLVjmoAC68Z330.mp3',
                pic: 'http://wsing.bssdl.kugou.com/c66f82bdb5b49e9b88dcfe898407da93.jpg_188x188.jpg'
            }
        ]
      });
      var ap4 = new APlayer({
        element: player4,
        narrow: false,
        autoplay: false,
        showlrc: false,
        mutex: true,
        theme: '#2d8cf0',
        mode: 'random',
        music: [
            {
                title: '爱尔兰画眉',
                author: '翎渡',
                url: 'http://otr48sjv5.bkt.clouddn.com/%E7%BF%8E%E6%B8%A1%20-%20%E7%88%B1%E5%B0%94%E5%85%B0%E7%94%BB%E7%9C%89.mp3',
                pic: 'http://p1.music.126.net/Cu_ikJw5uW7Ez7FfmI2aBQ==/7906588115606542.jpg?param=180y180'
            },
            {
                title: '野蜂飞舞',
                author: '翎渡',
                url: 'http://otr48sjv5.bkt.clouddn.com/%E7%BF%8E%E6%B8%A1%20-%20%E9%87%8E%E8%9C%82%E9%A3%9E%E8%88%9E%20%20-%20%E5%8D%8A%E9%9F%B3%E9%98%B6%E5%8F%A3%E7%90%B4.mp3',
                pic: 'http://p1.music.126.net/Cu_ikJw5uW7Ez7FfmI2aBQ==/7906588115606542.jpg?param=180y180'
            },
            {
                title: 'purple passion',
                author: '翎渡',
                url: 'http://otr48sjv5.bkt.clouddn.com/%E7%BF%8E%E6%B8%A1%20-%20purple%20passion%20%20-%20%E5%8D%8A%E9%9F%B3%E9%98%B6%E5%8F%A3%E7%90%B4.mp3',
                pic: 'http://p1.music.126.net/Cu_ikJw5uW7Ez7FfmI2aBQ==/7906588115606542.jpg?param=180y180'
            }
        ]
      });
      var ap5 = new APlayer({
        element: player5,
        narrow: false,
        autoplay: false,
        showlrc: false,
        mutex: true,
        theme: '#2d8cf0',
        mode: 'random',
        music: [
            {
                title: 'letter song.cover',
                author: '流萤川小时',
                url: 'http://otr48sjv5.bkt.clouddn.com/%E6%B5%81%E8%90%A4%E5%B7%9D%E5%B0%8F%E6%97%B6-letter%20song.mp3',
                pic: 'http://wsing.bssdl.kugou.com/35e35d257b628b4735e76f24bc6177ec.jpg_188x188.jpg'
            },
            {
                title: '四月は君の嘘-私の嘘',
                author: '流萤川小时',
                url: 'http://otr48sjv5.bkt.clouddn.com/%E6%B5%81%E8%90%A4%E5%B7%9D%E5%B0%8F%E6%97%B6-%E5%9B%9B%E6%9C%88%E3%81%AF%E5%90%9B%E3%81%AE%E5%98%98-%E7%A7%81%E3%81%AE%E5%98%98.mp3',
                pic: 'http://wsing.bssdl.kugou.com/35e35d257b628b4735e76f24bc6177ec.jpg_188x188.jpg'
            },
            {
                title: '远い空へ',
                author: '流萤川小时',
                url: 'http://otr48sjv5.bkt.clouddn.com/%E6%B5%81%E8%90%A4%E5%B7%9D%E5%B0%8F%E6%97%B6-%E8%BF%9C%E3%81%84%E7%A9%BA%E3%81%B8.mp3',
                pic: 'http://wsing.bssdl.kugou.com/35e35d257b628b4735e76f24bc6177ec.jpg_188x188.jpg'
            }
        ]
      })
    },
    methods: {
        playDetail1(id) {
            this.$router.push(
                 {name: 'play', params: {'videoId': id}}
             )
        }
    },
    created () {

      this.$store.state.video.recommondList1 = this.recommondList1
    
    }
}
</script>


<style scoped>
.container1 {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.container2{
    margin-bottom: 40px;
}
.author{
	text-align: center;
	font-size: 18px;
}

.music-title{
	margin-bottom: 20px;
}

.tutorial-title{
	margin: 40px 0px;
}
.gridlist-container{
    flex-direction: row;
}

.gridlist{
	display: inline-block;

	width: 440px;
	height: 300px;
	margin: 10px 10px;

}
.tutorial-img{
	/*height: 100%;*/
	padding: 0;
	margin: 0; 
	width: 100%;
	height: 230px;

}

.gridlist-title{
	font-size: 18px;
	font-weight: bold;

}

.newyear{
	margin: 20px 0;


}

.newyear-title{
	margin: 20px 0px;
	text-align: center;
}

.newyear-subtitle{
    margin: 20px 0px;
    text-align: center;
    color: #bbb;
}

.newyear-img{
	margin-top: 20px;
	margin-left: 80px;
}
</style>
